//引入包
const path = require('path')
const htmlWebpack = require('html-webpack-plugin')
const  {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    //入口文件
    entry:'./src/index.ts',
    //打包文件放置的位置.
    output:{
        path:path.resolve(__dirname,"dist"), //绝对路径
        filename:'bundle.js',
        environment: { //配置打包环境
            arrowFunction: false,//不使用箭头函数
            const: false //不适用const

        }
    },
    //打包需要使用的模块
    module:{
        //指定规则
        rules:[
            //配置babel'
            {
                test:/\.ts$/, //以ts文件结尾的文件 使用 ts-load 模块
                use:[
                    { //指定加载器
                        loader:"babel-loader",
                        options: {
                            //设置预定义坏境
                            presets:[
                              [
                                  //指定坏境插件
                                   "@babel/preset-env",
                                    //配置信息
                                    {
                                        //兼容浏览器版本
                                        targets:{
                                            "chrome":"58", //兼容至chrome 88
                                            "ie":"6"
                                        },
                                        "corejs":"3", //core js的版本
                                        //使用的core.js的方式usage表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],//后方先执行，先编译为ts再编译为低版本js
                exclude:/node-modules/  //排除的文件
            },
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions:{
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers:'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpack({
            title:'snake',
            template: "./src/index.html"//根据模板生成
        }),
        new CleanWebpackPlugin()  //自动清空dist
    ],
    //设置模块引用  ts文件可以被引用
    resolve: {
        extensions: ['.ts','.js']
    }
}